<template>
  <div>
      <el-tree :data="groupTree" :default-expand-all="true" @node-click="groupTreeClick" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{node,data}">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="openAddGroupDialog(node,data)" title="添加" v-if="data.id==''">
              <i class="el-icon-circle-plus-outline"></i>
            </el-button>
            <el-button type="text" size="mini" @click="openEditGroupDialog(node, data)" title="修改" v-if="data.id!=''">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="text" size="mini" @click="openDelGroupDialog(node, data)" title="删除">
              <i class="el-icon-delete"></i>
            </el-button>
          </span>
        </span>
      </el-tree>
      <!-- <el-button type="primary" size="mini" @click="chooseGroupTree" style="margin-top:5px" :disabled="type=='socialdynamic'">添加到分组</el-button> -->
    <el-dialog :title="groupdialogTitle" :visible.sync="groupdialogVisible" append-to-body>
      <el-form ref="groupModel" :model="groupModel" label-position="right" label-width="140px" :rules="businessGroupRules" :hide-required-asterisk="true">
        <el-form-item label="上级业务分组" v-show="groupdialogTitle == '添加分组'">
          <el-input v-model="groupModel.parentname" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="业务分组名称" prop="displayname">
          <el-input v-model="groupModel.displayname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateGroup">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteDialogVisible" append-to-body>
      <span>确认删除所选择的分组吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delGroup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
    getSubscribegroupTree,
    saveOrUpdateSubscribeGroup,
    deleteSubscribeGroup,
    addInstance
} from '@/api/search'
import util from '@/utils'
export default {
    data () {
        return {
            groupdialogTitle: '',
            groupdialogVisible: false,
            deleteDialogVisible: false,
            groupTreeModel: false,
            groupTree: [], // 分组树,
            groupName: '点击选择分组',
            groupModel: {
                id: '',
                parentid: '',
                displayname: '',
                parentname: ''
            },
            delId: '',
            gid: '',
            businessGroupRules: {
                displayname: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            }
        }
    },
    props: {
        groupObjs: Array,
        type: String
    },
    mounted () {
        this.getGroupTree()
        console.log(this.type)
    },
    methods: {
    // 获取分组树
        getGroupTree () {
            getSubscribegroupTree().then(response => {
                this.groupTree = util.parseTreeData(response.data)
            })
        },
        popoverShow () {
            this.gid = ''
            if (this.groupTree.length == 0) {
                this.getGroupTree()
            }
        },
        groupTreeClick (data) {
            this.gid = data.id
        },
        chooseGroupTree () {
            if (this.gid == '') {
                this.$message.error('请选择分组')
                return
            }
            // if (this.groupObjs.length == 0) {
            //     this.$message.error('请选择标注对象')
            //     return
            // }
            let params = {
                gid: this.gid,
                objs: this.groupObjs
            }
            addInstance(params).then(response => {
                this.$message(response.msg)
                this.$emit('closeDialog')
            })
        },
        openAddGroupDialog (node, data) {
            this.groupdialogTitle = '添加分组'
            this.groupdialogVisible = true
            this.groupModel.parentid = data.id
            this.groupModel.parentname = data.displayname
            this.groupModel.id = ''
            this.groupModel.displayname = ''
            this.$nextTick(() => {
                this.$refs.groupModel.clearValidate()
            })
        },
        openEditGroupDialog (node, data) {
            this.groupdialogTitle = '修改分组'
            this.groupdialogVisible = true
            this.groupModel.parentid = node.parent.data.id || ''
            this.groupModel.id = data.id
            this.groupModel.displayname = data.displayname
            this.$nextTick(() => {
                this.$refs.groupModel.clearValidate()
            })
        },
        openDelGroupDialog (node, data) {
            this.deleteDialogVisible = true
            this.delId = data.id
        },
        saveOrUpdateGroup () {
            this.$refs.groupModel.validate(valid => {
                if (valid) {
                    let _postData = {}
                    for (let k in this.groupModel) {
                        if (k != 'parentname') {
                            _postData[k] = this.groupModel[k]
                        }
                    }
                    this.saveOrUpdateSubscribeGroup(_postData)
                } else {
                    return false
                }
            })
        },
        delGroup () {
            deleteSubscribeGroup(this.delId).then(response => {
                this.$message(response.msg)
                this.deleteDialogVisible = false
                this.getGroupTree()
            })
        },
        saveOrUpdateSubscribeGroup (data) {
            saveOrUpdateSubscribeGroup(data).then(response => {
                this.$message(response.msg)
                this.groupdialogVisible = false
                this.getGroupTree()
            })
        }
    }
}
</script>
 <style scoped>
.group-btn {
  margin-top: 7px;
  /* margin-left: 20px; */
}
.choose-btn {
  float: right;
}
.el-tree-node__content button {
  opacity: 0;
  color: #333;
}
.el-tree-node__content button:hover {
  color: #111;
}
.el-tree-node__content:hover button {
  opacity: 1;
}
</style>
